<template>
  <div class="repairList">
    <!-- 下拉选择框 -->
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item
        v-model="rec.status"
        :options="rec.repairStatusList"
        @change="getList"
      />
      <van-dropdown-item
        v-model="rec.buildingLocation"
        :options="rec.buildList"
        @change="getList"
      />
      <van-dropdown-item
        v-model="rec.repairType"
        :options="rec.typesList"
        @change="getList"
      />
    </van-dropdown-menu>
    <!-- 列表卡片 -->
    <div class="list_card">
      <ListCard :list="rec.list" v-if="rec.list.length" />
      <Empty class="empty" v-else />
    </div>
  </div>
</template>

<script setup lang="ts">
import ListCard from "./components/list-card.vue";
import Empty from "@/components/empty/index.vue";
import { ref, reactive } from "vue";
import { getWorkerList } from "@/service/modules/repairlist";
import { getPlaceTree, getTypes } from "@/service/modules/repair";
import LocalCache from "@/utils/cache";
const repairListFilter = LocalCache.getSession("repairListFilter");
const show = ref(true);
const rec = reactive({
  repairStatusList: [
    {
      text: "待维修",
      value: 0,
    },
    {
      text: "已维修",
      value: 1,
    },
  ],
  buildList: [
    {
      text: "所有建筑",
      value: "",
    },
  ],
  typesList: [
    {
      text: "所有类型",
      value: "",
    },
  ],
  repairType: repairListFilter?.repairType || "",
  buildingLocation: repairListFilter?.buildingLocation || "",
  status: repairListFilter?.status || 0,
  list: [],
});

getList();
// 获取列表数据
async function getList() {
  show.value = true;
  const { code, rows } = await getWorkerList({
    ...rec,
  });
  if (code === 0) {
    rec.list = rows;
    LocalCache.setSession("repairListFilter", rec)
    if (rows.length === 0) {
      show.value = false;
    }
  }
}

// 获取报修类型数据
getTypesFn();
async function getTypesFn() {
  const { code, rows } = await getTypes(1);
  if (code === 0) {
    rec.typesList = rec.typesList.concat(
      rows.map((i) => {
        return {
          text: i.repairType,
          value: i.id,
        };
      })
    );
  }
}

// 获取楼栋
getPlaceTreeFn();
async function getPlaceTreeFn() {
  const {
    code,
    data: { children },
  } = await getPlaceTree();
  if (code === 0) {
    let arry = [];
    children.forEach((i) => {
      i.children.forEach((k) => {
        arry.push({
          text: k.buildingName,
          value: k.buildingId,
        });
      });
    });
    rec.buildList = rec.buildList.concat(arry);
  }
}

</script>

<style lang="less" scoped>
.repairList {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 5px;
  .list_card {
    padding: 0 16px;
    padding-bottom: 1px;
  }
  .content {
    margin-top: 16px;
    padding: 0 16px;
  }
  .list_switch {
    position: fixed;
    bottom: 34px;
    right: 16px;
    > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .title {
        font-size: 14px;
        line-height: 16px;
        color: rgba(48, 50, 51, 1);
        margin-top: 6px;
      }
    }
    .circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      text-align: center;
      line-height: 40px;
      background: #ffffff;
      box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.12);
      svg {
        width: 16px;
        height: 16px;
      }
    }
    .orange {
      background: linear-gradient(rgba(255, 201, 87, 1), rgba(255, 145, 83, 1));
      margin-top: 16px;
    }
  }
  .switch {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 64px;
    background: #fff;
    .tab-comp {
      width: 100%;
      /deep/ .van-tab {
        width: 50%;
      }
    }
  }
  .empty {
    display: flex;
    position: absolute;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* 下拉选择框样式 */
/deep/ .van-ellipsis {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: LEFT;
  color: #303233;
  line-height: 22px;
}
/deep/ .van-dropdown-menu {
  --van-dropdown-menu-box-shadow: 0;
  margin-bottom: 10px;
}
</style>
